import React, { useState, useEffect, useCallback } from 'react'
import axios from 'axios'
import { Checkbox, Button } from 'react-vant'
import { Checked, Label, Location, ArrowLeft, Arrow, YouzanShield } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import '../css/shopcar.css'
export default function Shopcar() {
  const jump=useNavigate()
  const [flag, setFlag] = useState(true)
  const [car,setcar]=useState([])
  const [sum,setsum]=useState(0)
  const getCar=async()=>{
    let {data:{carlist}}=await axios.get('http://localhost:3000/carlist')
    setcar(carlist)
    setsum(carlist.filter(i=>i.checked==true).reduce((pre,item)=>pre+item.price*item.discount,0))
  }
  useEffect(()=>{
    getCar()
  },[])

  const upcheck=async(id,checked)=>{
    // if(id in ids){
    //   delete ids[id]
    // }else{
    //   ids[id]=checked
    // }
    // console.log(ids)
    await axios.put('http://localhost:3000/carupdate',{id,checked})
    getCar()
  }
  return (
    <div id='shopcar'>
      <div id="liuhai">
        <h2><ArrowLeft /></h2>
        <h2>购物车</h2>
        <h2 onClick={() => { setFlag(!flag) }}>〓</h2>
      </div>
      <div id="carlist">
        {car.map(item=>(
          <div id="message" key={item._id}>
          <div id="message_author">
            <div id='msg_author'>

              <div id="msg_photo">
                <img src="./vite.svg" alt="" />
              </div>
              <div id="msg_con">
                <p >{item.author}</p>
                <p style={{ fontSize: '12px' }}>刚刚来过</p>
              </div>
              <YouzanShield />学生认证
            </div>
            <div id='msg_detail'>
              <div id="dta_book">
                <div id="bookChecked">
                  <input type="checkbox" onChange={(e)=>{upcheck(item._id,e.target.checked)}}/>
                </div>
                <div id="bookleft">
                  <img src={item.image} alt="" />
                </div>
                <div id="bookright">
                  <p>{item.name}</p>
                  <p><Label />{item.pinxiang}</p>
                  <p><Location />{item.location}&emsp;支持自提</p>
                  <p style={{ color: 'tomato' }}>￥{item.price*(item.discount/10)}&emsp;&emsp;<span style={{textDecoration:'line-through',color:'black'}}>￥{item.price}</span>&emsp;&emsp;<span style={{fontSize:'13px',color:'black'}}>xxx人想要</span></p>
                </div>
              </div>
            </div>

          </div>
        </div>
        ))}
        
      </div>
      {
        flag ? (
          <div id="over">
            <div className='total'>
              <p>合计：￥{sum}</p>
              <p style={{ fontSize: '12px' }}>不含运费</p>
            </div>
            <div className='settlement' onClick={()=>{jump('/cell')}}>
              结算({car.filter(i=>i.checked==true).length})
            </div>
          </div>
        ) : (
          <div id="over1">
            <div className='total'>
              移入想要
            </div>
            <div className='settlement'>
              删除
            </div>
          </div>
        )
      }

    </div>
  )
}
